People can retain 65% of the information three days after watching an image with data compared to 10% of the information they hear!
Interactive visualizations go a step further from regular visualization by allowing users to manipulate, explore, and filter data using sliders, buttons, menus, hover effects, etc.
Let’s explore an interactive viz displaying The Largest Vocabulary in Hip Hop
Take 5 minutes to analyze the data and then share your thought on the following:
So far, we have covered the following:
| Objective | Complete |
|---|---|
| Discover different layouts for organizing multiple visualizations | |
| Demonstrate adding interactivity and highlighting data using labels |
show()figure() as shown below# Set the output method
output_notebook()
tools = ["box_select", "hover", "reset"]
# create a new plot
p1 = figure(title = "age vs avg_glucose_level",
width = 400, height = 400,
tools = tools)
p1.xaxis.axis_label = 'age'
p1.yaxis.axis_label = 'avg_glucose_level'
p1.diamond(df['age'],
df['avg_glucose_level'],
size = 20,
color = "plum",
alpha = 0.2)# Create another one.
LEVELS = ['not_affected', 'affected']
MARKERS = ['hex', 'triangle']
p2 = figure(width = 400, height = 400, tools = tools)
p2.hbar(y=[0, 1],
height = 0.2,
left = 0,
right = df.stroke.value_counts(),
color = "navy")
# Create another graph.
p3 = figure(title = "Age vs average glucose level",
width = 400,
height = 400,
tools = tools)pandas DataFrame to Bokeh using the object source parameter and other parameters (such as the x and y axes)# Hover tool refers to our own data field using @ and
# a position on the graph using $.
hover = HoverTool(tooltips = [('Age', '@age'),
('Average glucose level', '@avg_glucose_level'),
('(x,y)', '($x, $y)')])
p = figure(title = "age vs avg_glucose_level",
width=400, height=400,
x_axis_label = 'age',
y_axis_label = 'avg_glucose_level')
p.diamond('age',
'avg_glucose_level',
source = src,
size = 20,
color = "plum",
alpha = 0.2)# Hover tool refers to our own data field using @ and
# a position on the graph using $.
hover = HoverTool(tooltips = [('Age', '@age'),
('Average glucose level', '@avg_glucose_level'),
('(x,y)', '($x, $y)')])
p = figure(title = "age vs avg_glucose_level",
width = 400, height = 400,
x_axis_label = 'ppl_total',
y_axis_label = 'num_adults')
p.diamond('age','avg_glucose_level', source = src, size=20, color = "plum", alpha=0.2,
hover_fill_alpha = 1.0, hover_fill_color = 'navy')
# Add the hover tool to the graph.
p.add_tools(hover)| Objective | Complete |
|---|---|
| Discover different layouts for organizing multiple visualizations |
✔ |
| Demonstrate adding interactivity and highlighting data using labels |
ColumnDataSource() (as used for the previous visualization) sometimes can throw an error, so we will create a new one for each graph# Specify the selection tools to be made available.
select_tools = ['box_select', 'lasso_select', 'poly_select', 'tap', 'reset']
# Create the figure.
fig = figure(height = 400,
width = 600,
x_axis_label = 'age',
y_axis_label = 'avg_glucose_level',
title = 'Interactive scatterplot',
toolbar_location = 'below',
tools = select_tools)tooltips from HoverTool() accepts input data and allows us to select data with the cursorhover_glyph and adding it as renderers to .add_tools() will display the data point hovered over as a yellow circle instead# Format the tooltip.
tooltips = [
('Age','@age'),
('Average glucose level', '@avg_glucose_level')
]
hover_glyph = fig.circle(x = 'age', y = 'avg_glucose_level',
source = costa_cds,
size = 15, alpha = 0,
hover_fill_color = 'yellow',
hover_alpha = 0.2)
# Add the HoverTool to the figure.
fig.add_tools(HoverTool(tooltips = tooltips, renderers = [hover_glyph]))
# Visualize the graph.
show(fig)Target_class by creating filters and views for both labels# Consolidate the common keyword arguments in dictionaries.
common_figure_kwargs = {
'width': 400,
'height':500,
'x_axis_label': 'age',
'y_axis_label' : 'avg_glucose_level',
'toolbar_location': None}
common_circle_kwargs = {
'x': 'age',
'y': 'avg_glucose_level',
'source': stroke_labels,
'size': 12,
'alpha': 0.7,}
common_vul_kwargs = {
'view': vul_view,
'color': '#002859',
'legend_label': 'affected'}
common_non_kwargs = {
'view': nonvul_view,
'color': '#FFC324',
'legend_label': 'not_affected'}hide_fig = figure(**common_figure_kwargs,
title = 'Click Legend to HIDE Data')
hide_fig.scatter(**common_circle_kwargs, **common_vul_kwargs)
hide_fig.scatter(**common_circle_kwargs, **common_non_kwargs)
mute_fig = figure(**common_figure_kwargs, title = 'Click Legend to MUTE Data')
mute_fig.circle(**common_circle_kwargs, **common_vul_kwargs,
muted_alpha = 0.1)
mute_fig.circle(**common_circle_kwargs, **common_non_kwargs,
muted_alpha = 0.1)| Objective | Complete |
|---|---|
| Discover different layouts for organizing multiple visualizations |
✔ |
| Demonstrate adding interactivity and highlighting data using labels |
✔ |
You are now ready to try tasks 9-21 in the Exercise for this topic